.hint-box-component {
  position: relative;

  max-width: calc(var(--max-width) - 48px);
  margin: 12px var(--horizontal-margin);
  padding: 16px;
  border-radius: 0.5em;

  background-color: var(--hint-box-bg-color);

  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  word-wrap: break-word;
  word-break: break-word;

  @media (prefers-color-scheme: dark) {
    background-color: var(--hint-box-title-color);
  }

  .grey & {
    margin: 16px;
  }

  .text-marker {
    padding-left: 0;
  }

  .paragraph,
  .ordered-list-item,
  .unordered-list-item {
    font-size: 0.92em;
  }
}

.hint-box-title {
  position: relative;

  display: block;

  padding-left: 26px;

  color: var(--hint-box-title-color);

  font-weight: 600;
  line-height: 1.25;

  @media (prefers-color-scheme: dark) {
    color: var(--hint-box-bg-color);
  }

  &:not(:only-child) {
    margin-bottom: 12px;
  }

  &.access {
    padding-right: 16px;

    &::after {
      content: " ";

      position: absolute;
      top: 50%;
      right: 2px;

      float: right;

      width: 8px;
      height: 8px;
      margin-top: -5px;
      border-width: 2px 2px 0 0;
      border-style: solid;
      border-color: var(--arrow-color);

      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    }
  }
}

.hint-box-icon {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
}

.hint-box-hover {
  filter: brightness(0.95);

  @media (prefers-color-scheme: dark) {
    filter: brightness(1.1);
  }
}
